$(function () {
  yuedufenxi = 1;
  inityuedufenxiData();
})

function inityuedufenxiData() {
  const username = localStorage.getItem("user");
  const currYear = localStorage.getItem("year");
  const currMon = localStorage.getItem("month");
  const currDept = localStorage.getItem("dept");
  var obj2 = {
    username: username,
    budgetYear: currYear,
    budgetMonth: currMon,
    dept: currDept,
    status: 2,
    chartPage: 62,
    chartNo: 2
  };
  ApiGet("getdata", obj2, function (e) {
    var json = JSON.parse(e);
    var chartData = json.items[0].charts;
    // console.log(chartData, "chartData2");
    let data = chartData[0].data
    getyuedufenxiChart(data);
  });

  var obj3 = {
    username: username,
    budgetYear: currYear,
    budgetMonth: currMon,
    dept: currDept,
    status: 2,
    chartPage: 602,
    chartNo: 2
  };
  ApiGet("getdata", obj3, function (e) {
    var json = JSON.parse(e);
    var chartData = json.items[0].charts;
    // console.log(chartData, 'chartData3')
    let data = chartData[0].data
    getyuedufenxiTable(data);
  });


}

function getyuedufenxiChart(data) {
  let legendData = ['项目收款', '成本支出']
  let xiangmushoukuan = [];
  let chengbenzhichu = [];
  for (let i = 0; i < data.length; i++) {
    xiangmushoukuan.push((data[i].key02 / 10000).toFixed(2))
    chengbenzhichu.push((data[i].key03 / 10000).toFixed(2))
  }
  let leijirate = [{
    name: '项目收款',
    smooth: true, //平滑曲线显示
    symbol: 'circle', //标记的图形为实心圆
    symbolSize: 8, //标记的大小
    itemStyle: {
      normal: {
        color: '#165DFF',
      },
    },
    showSymbol: false,
    type: 'line',
    lineStyle: {
      width: 2
    },
    areaStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        offset: 0,
        color: 'rgba(230,238,255,0.8)'
      },
      {
        offset: 1,
        color: 'rgba(230,238,255,0.2)'
      }
      ])
    },
    data: xiangmushoukuan
  },
  {
    name: '成本支出',
    smooth: true, //平滑曲线显示
    symbol: 'circle', //标记的图形为实心圆
    symbolSize: 8, //标记的大小
    itemStyle: {
      normal: {
        color: '#20C997',
      },
    },
    showSymbol: false,
    lineStyle: {
      width: 2
    },
    type: 'line',
    areaStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        offset: 0,
        color: 'rgba(212,245,245,0.8)'
      },
      {
        offset: 1,
        color: 'rgba(212,245,245,0.2)'
      }
      ])
    },
    data: chengbenzhichu
  }
  ]
  have('yuedufenxi-chart') ? lineChartMD('yuedufenxi-chart', leijirate, legendData) : ''
}

function getyuedufenxiTable(Tabledata) {
  console.log(Tabledata)
  let data = Tabledata

  let cols = [
    // 1
    [{
      field: 'key01',
      title: '类别',
      rowspan: 3,
      templet: function (d) {
        return `
        <a onclick="clickTo(this)" name=${d.key01}  "cursor:pointer">
          <div>
            <span>${d.key01}</span> 
          </div>
        </a>`
      }
    },
    {
      field: '',
      title: '项目收款',
      colspan: 4,
      align: 'center',
    },
    {
      field: '',
      title: '成本支出',
      colspan: 6,
      align: 'center',
    }
    ],
    // 2
    [{
      field: 'key02',
      title: '期初结余',
      sort: true,
      minWidth: 160,
      align: 'right',
      rowspan: 2,
      templet: function (d) {
        return `<span>${pricefmt((d.key02 / 10000).toFixed(2))}</span>`
      }
    },
    {
      field: 'key03',
      title: '本期来款',
      sort: true,
      minWidth: 160,
      rowspan: 2,
      align: 'right',
      templet: function (d) {
        return `<span>${pricefmt((d.key03 / 10000).toFixed(2))}</span>`
      }
    },
    {
      field: 'key04',
      title: '本期结算',
      sort: true,
      minWidth: 160,
      rowspan: 2,
      align: 'right',
      templet: function (d) {
        return `<span>${pricefmt((d.key04 / 10000).toFixed(2))}</span>`
      }
    },
    {
      field: 'key05',
      title: '本期未结算',
      sort: true,
      minWidth: 160,
      rowspan: 2,
      align: 'right',
      templet: function (d) {
        return `<span>${pricefmt((d.key05 / 10000).toFixed(2))}</span>`
      }
    },
    {
      field: '',
      title: '报销成本',
      sort: true,
      colspan: 4,
      align: 'center'
    },
    {
      field: '',
      title: '项目占用资金',
      sort: true,
      colspan: 3,
      align: 'center'
    },
    ],
    // 3
    [{
      field: 'key06',
      title: '期末结余',
      sort: true,
      minWidth: 160,
      align: 'right',
      templet: function (d) {
        return `<span>${pricefmt((d.key06 / 10000).toFixed(2))}</span>`
      }
    },
    {
      field: 'key07',
      title: '本期支出',
      sort: true,
      minWidth: 160,
      align: 'right',
      templet: function (d) {
        return `<span>${pricefmt((d.key07 / 10000).toFixed(2))}</span>`
      }
    },
    {
      field: 'key08',
      title: '本期结算',
      sort: true,
      minWidth: 160,
      align: 'right',
      templet: function (d) {
        return `<span>${pricefmt((d.key08 / 10000).toFixed(2))}</span>`
      }
    },
    {
      field: 'key09',
      title: '本期未结算',
      minWidth: 160,
      sort: true,
      align: 'right',
      templet: function (d) {
        return `<span>${pricefmt((d.key09 / 10000).toFixed(2))}</span>`
      }
    },
    {
      field: 'key10',
      title: '预付款',
      width: 200,
      sort: true,
      // fixed: "right",
      align: "right",
      templet: function (d) {
        return `<span>${pricefmt((d.key10 / 10000).toFixed(2))}</span>`
      }
    }
    ]
  ];


  tableDrawing(data) // 数据传到 table组件
  // pagesDrawing(res) // 数据传到 分页组件

  function tableDrawing(data) {
    layui.use('table', function () {
      let table = layui.table;
      table.render({
        elem: '#newsList',
        cols: cols,
        data: data, // 数据
        // limit: limit, // 每页显示的条数
        // height: tableHeight,
      });
    })
  }
}

function clickTo(obj) {
  let name = obj.getAttribute('name');
  localStorage.setItem('name', name);
  window.location.href = 'topic.html';
}